<template>
    <div class="about">
        <div class="list_style">
            <el-button class="primary" @click="playVideo">开始视频</el-button>
            <el-button class="primary" @click="stopVideo">暂停视频</el-button>
            <el-button class="primary" @click="reloadVideo">重新加载</el-button>
            <el-button class="primary" @click="forwardVideo">视频快进</el-button>
            <el-button class="primary" @click="backVideo">视频后退</el-button>
            <el-button class="primary" @click="volumeUpVideo">增大音量</el-button>
            <el-button class="primary" @click="intervalLoopVideo">循环20~30s视频</el-button>
            <el-button class="primary" @click="fillVideoHandle">设置视频铺满</el-button>

            <!--            <el-button class="primary" @click="volumeDownVideo">降低音量</el-button>-->
        </div>
        <PlayVideo
            ref="PlayVideo"
            :videoSrc="videoSrc"
        />
    </div>
</template>
<script>
import PlayVideo from "@/components/PlayVideo";
import { ref } from 'vue'
export default {
    name: 'AboutView',
    components:{
        PlayVideo
    },
    setup(){
        const PlayVideo = ref(null)
        const videoSrc = "http://vjs.zencdn.net/v/oceans.mp4"
        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/14 17:08
         * @Describe: 播放
         */
        const playVideo = () => {
            PlayVideo.value.myPlay()
        }
        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/14 17:12
         * @Describe: 暂停视频
         */
        const stopVideo = () => {
            PlayVideo.value.myStop()
        }
        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/14 17:24
         * @Describe: 重新加载
         */
        const reloadVideo = () => {
            PlayVideo.value.myReload()
        }
        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/14 17:32
         * @Describe: 视频快进
         */
        const forwardVideo = () => {
            PlayVideo.value.myForward()
        }
        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/14 17:32
         * @Describe: 视频后退
         */
        const backVideo = () => {
            PlayVideo.value.myBack()
        }
        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/14 17:33
         * @Describe: 增大音量
         */
        const volumeUpVideo = () => {
            PlayVideo.value.myVolumeUp();
        }

        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/14 17:33
         * @Describe: 减小音量
         */
        // const volumeDownVideo = () => {
        //
        // }
        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/14 18:11
         * @Describe: 区间循环
         */
        const intervalLoopVideo = () => {
            PlayVideo.value.intervalLoop();
        }
        /**
         * @Author: zhangjinhao
         * @Date: 2023/6/21 10:40
         * @Describe: 铺满
         */
        const fillVideoHandle = () => {
            PlayVideo.value.fillVideo()
        }
        return {
            videoSrc,
            PlayVideo,
            playVideo,
            stopVideo,
            reloadVideo,
            forwardVideo,
            backVideo,
            volumeUpVideo,
            // volumeDownVideo,
            intervalLoopVideo,
            fillVideoHandle
        }
    }
}
</script>
<style lang="scss" scoped>
.about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1000px
}

.list_style {
    width: 200px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.list_style :deep(.el-button+.el-button){
    margin-left:0px;
}
.list_style :deep(.el-button){
    margin-top:10px;
}
</style>
